"use strict";
Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
const vue = require("vue");
const FONT_GAP = 4;
const _sfc_main = /* @__PURE__ */ vue.defineComponent({
  ...{
    name: "me-watermark"
  },
  __name: "watermark",
  props: {
    text: { default: "" },
    font: { default() {
      return {};
    } },
    rotation: { default: -22 },
    width: {},
    height: {},
    gap: { default() {
      return [100, 100];
    } },
    offset: {},
    zIndex: { default: 2 },
    visible: { type: Boolean, default: true }
  },
  setup(__props) {
    const reRender = (mutation, watermarkNode) => {
      let flag = false;
      if (mutation.removedNodes.length > 0) {
        flag = Array.from(mutation.removedNodes).some((node) => node === watermarkNode);
      }
      if (mutation.type === "attributes" && mutation.target === watermarkNode) {
        flag = true;
      }
      return flag;
    };
    const handleMutation = (mutationList) => {
      mutationList.map((mutation) => {
        if (reRender(mutation, watermarkRef.value)) {
          destroyWatermark();
          createWatermark();
        }
      });
    };
    const props = __props;
    let ratio = 1;
    let observer;
    const gapX = vue.computed(() => {
      return props.gap[0];
    });
    const gapY = vue.computed(() => {
      return props.gap[1];
    });
    const gapCenterX = vue.computed(() => {
      return gapX.value / 2;
    });
    const gapCenterY = vue.computed(() => {
      return gapY.value / 2;
    });
    const offsetLeft = vue.computed(() => {
      var _a;
      return ((_a = props.offset) == null ? void 0 : _a[0]) ?? gapCenterX.value;
    });
    const offsetTop = vue.computed(() => {
      var _a;
      return ((_a = props.offset) == null ? void 0 : _a[1]) ?? gapCenterY.value;
    });
    const fontSize = vue.computed(() => {
      var _a;
      return ((_a = props.font) == null ? void 0 : _a.fontSize) ?? 14;
    });
    const color = vue.computed(() => {
      return props.font.color ?? "rgba(0,0,0,0.3)";
    });
    const fontWeight = vue.computed(() => {
      return props.font.fontWeight ?? "normal";
    });
    const fontFamily = vue.computed(() => {
      return props.font.fontFamily ?? "sans-serif";
    });
    const fontStyle = vue.computed(() => {
      return props.font.fontStyle ?? "normal";
    });
    const rotation = vue.computed(() => {
      return props.rotation * Math.PI / 180;
    });
    const watermarkStyle = vue.computed(() => {
      const style = {
        zIndex: props.zIndex,
        position: "absolute",
        top: 0,
        left: 0,
        width: "100%",
        height: "100%",
        backgroundRepeat: "repeat",
        pointerEvents: "none"
      };
      const left = offsetLeft.value - gapCenterX.value;
      const top = offsetTop.value - gapCenterY.value;
      if (left > 0) {
        style.left = left + "px";
        style.width = `calc(100% - ${left}px)`;
      }
      ;
      if (top > 0) {
        style.top = top + "px";
        style.height = `calc(100% - ${top}px)`;
      }
      ;
      return style;
    });
    vue.watch(() => props.text, () => {
      destroyWatermark();
      createWatermark();
    });
    vue.watch(() => props.visible, () => {
      if (props.visible) {
        destroyWatermark();
        createWatermark();
      } else {
        destroyWatermark();
      }
    });
    const containerRef = vue.shallowRef();
    const watermarkRef = vue.shallowRef();
    const destroyWatermark = () => {
      var _a;
      (_a = watermarkRef.value) == null ? void 0 : _a.remove();
      watermarkRef.value = void 0;
    };
    const getWatermarkSize = (context) => {
      const { width, height, text } = props;
      let defaultWidth = 120;
      let defaultHeight = 64;
      const textList = Array.isArray(text) ? text : [text];
      const widthList = textList.map((item) => context.measureText(item).width);
      defaultWidth = Math.ceil(Math.max(...widthList));
      defaultHeight = fontSize.value * textList.length + (textList.length - 1) * FONT_GAP;
      return [width ?? defaultWidth, height ?? defaultHeight];
    };
    const fillTexts = (context, drawX, drawY, drawWidth, drawHeight) => {
      const size = fontSize.value * ratio;
      context.font = `${fontStyle.value} normal ${fontWeight.value} ${size}px/${drawHeight}px ${fontFamily.value}`;
      context.fillStyle = color.value;
      context.textAlign = "center";
      context.textBaseline = "top";
      context.translate(drawWidth / 2, 0);
      const textList = Array.isArray(props.text) ? props.text : [props.text];
      textList.forEach((text, index) => {
        context.fillText(text, drawX, drawY + index * (size + FONT_GAP * ratio));
      });
    };
    const getStyleString = (style) => {
      const list = [];
      for (let key in style) {
        list.push(`${key.replace(/([A-Z])/g, "-$1").toLocaleLowerCase()}: ${style[key]}`);
      }
      return list.join(";");
    };
    const appendWatermark = (base64, watermarkWidth) => {
      if (containerRef.value && watermarkRef.value) {
        watermarkRef.value.setAttribute("style", getStyleString({
          ...watermarkStyle.value,
          backgroundImage: `url(${base64})`,
          backgroundSize: `${(gapX.value + watermarkWidth) * 2}px`
        }));
        watermarkRef.value.id = "me-watermark";
        containerRef.value.append(watermarkRef.value);
      }
    };
    const rotateWatermark = (context, rotateX, rotateY, rotate) => {
      context.translate(rotateX, rotateY);
      context.rotate(rotate);
      context.translate(-rotateX, -rotateY);
    };
    const createWatermark = () => {
      const canvas = document.createElement("canvas");
      const context = canvas.getContext("2d");
      if (context) {
        if (!watermarkRef.value) {
          watermarkRef.value = document.createElement("div");
        }
        const [watermarkWidth, watermarkHeight] = getWatermarkSize(context);
        const canvasWidth = (gapX.value + watermarkWidth) * ratio;
        const canvasHeight = (gapY.value + watermarkHeight) * ratio;
        canvas.width = canvasWidth * 2;
        canvas.height = canvasHeight * 2;
        const drawX = gapX.value * ratio / 2;
        const drawY = gapY.value * ratio / 2;
        const drawWidth = watermarkWidth * ratio;
        const drawHeight = watermarkHeight * ratio;
        const rotateX = (drawWidth + gapX.value * ratio) / 2;
        const rotateY = (drawHeight + gapY.value * ratio) / 2;
        const alternateDrawX = drawX + canvasWidth;
        const alternateDrawY = drawY + canvasHeight;
        const alternateRotateX = rotateX + canvasWidth;
        const alternateRotateY = rotateY + canvasHeight;
        context.save();
        rotateWatermark(context, rotateX, rotateY, rotation.value);
        fillTexts(context, drawX, drawY, drawWidth, drawHeight);
        context.restore();
        rotateWatermark(context, alternateRotateX, alternateRotateY, rotation.value);
        fillTexts(context, alternateDrawX, alternateDrawY, drawWidth, drawHeight);
        appendWatermark(canvas.toDataURL(), watermarkWidth);
      }
    };
    vue.onMounted(() => {
      if (props.visible) {
        observer = new MutationObserver(handleMutation);
        ratio = window.devicePixelRatio || 1;
        createWatermark();
        observer.observe(containerRef.value, {
          attributes: true,
          childList: true,
          subtree: true,
          attributeFilter: ["style", "class"]
        });
      }
    });
    vue.onBeforeUnmount(() => {
      if (observer) {
        observer.disconnect();
      }
    });
    return (_ctx, _cache) => {
      return vue.openBlock(), vue.createElementBlock("div", {
        ref_key: "containerRef",
        ref: containerRef,
        class: "me-watermark"
      }, [
        vue.renderSlot(_ctx.$slots, "default")
      ], 512);
    };
  }
});
exports.default = _sfc_main;
//# sourceMappingURL=watermark.vue2.cjs.map
